<!-- 订单详情 -->
<template>
	<view class="order-details-page">
		<view class="order-status">{{ statusOn(orderInfo.status) }}</view>
		<view class="v-content">
			<view class="v-card p-align-top30 flex-align-center">
				<block v-for="(i, j) in scheduleList" :key="j">
					<view class="flex-column type-cls">
						<image class="v-img" :src="i.img"></image>
						<view>{{ i.text }}</view>
					</view>
				</block>
			</view>
			<view class="v-card padding30">
				<view class="font32">预约内容</view>
				<!-- packageList.list.length:加长套餐 -->
				<block v-if="addPackage.length > 0">
					<view class="flex-align-center commodity-content">
						<image :src="packageList.rotationChart"></image>
						<view class="flex-columns flex1">
							<text class="font36">{{ packageList.tradeName }}</text>
							<view class="colora5 m-top10 font26">服务理疗师：{{ technician.technicianName }}</view>
							<view class="colora5 m-top10 font26">预约时间：{{ orderInfo.serviceStartTime }}</view>
							<view class="flex-between">
								<view class="v-price flex-align-center">
									<text>￥</text>
									<view>{{ packageList.servicePrice }}</view>
								</view>
								<view class="color6a">x{{ orderInfo.number }}</view>
							</view>
						</view>
					</view>
					<block v-if="isShow">
						<view class="flex-align-center commodity-content" v-for="(i, j) in addPackage" :key="j">
							<view class="relative">
								<!-- i.fatherOrderNumber:父级订单，存在，则是加钟订单 -->
								<view class="add-hour">加钟</view>
								<image :src="i.rotationChart"></image>
							</view>
							<view class="flex-columns flex1">
								<text class="font36">{{ i.tradeName }}</text>
								<view class="colora5 m-top10 font26">服务理疗师：{{ technician.technicianName }}</view>
								<view class="colora5 m-top10 font26">预约时间：{{ orderInfo.serviceStartTime }}</view>
								<view class="flex-between">
									<!-- // 加钟价格：plusClockPrice   ，加钟折扣：clockDiscount  加钟时长/分钟：clockTime -->
									<view class="v-price flex-align-center">
										<text>￥</text>
										<view>{{ Number(i.plusClockPrice * ((100 - i.clockDiscount) / 100)).toFixed(2) }}</view>
										<!-- 加钟价格 -->
									</view>
									<view class="color6a">x{{ orderInfo.number }}</view>
								</view>
							</view>
						</view>
					</block>
					<view class="tl-mgs" v-if="!isShow && addPackage.length > 0" @tap="toChange">查看加钟套餐 ></view>
					<view class="tl-mgs" v-if="isShow" @tap="toChange">收起加钟套餐 ></view>
				</block>
				<block v-else>
					<view class="flex-align-center commodity-content">
						<image :src="packageList.rotationChart"></image>
						<view class="flex-columns flex1">
							<text class="font36">{{ packageList.tradeName }}</text>
							<view class="colora5 m-top10 font26">服务理疗师：{{ technician.technicianName }}</view>
							<view class="colora5 m-top10 font26">预约时间：{{ orderInfo.serviceStartTime }}</view>
							<view class="flex-between">
								<view class="v-price flex-align-center">
									<text>￥</text>
									<view>{{ packageList.servicePrice }}</view>
									<!-- <view>{{ orderInfo.disbursements }}</view> -->
									
								</view>
								<view class="color6a">x{{ orderInfo.number }}</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<!-- 下单人/用户 信息 -->
			<view class="v-card padding30">
				<view class="flex-between">
					<text class="colora5">下单人</text>
					<view class="color333">{{ addressManagement.consignee }}</view>
				</view>
				<view class="flex-between p-top20">
					<text class="colora5">联系方式</text>
					<view class="color333">{{ addressManagement.mobile }}</view>
				</view>
				<view class="flex-columns">
					<text class="colora5 p-top20">服务地址</text>
					<view class="color333 p-top20 font-overflow3">
						{{orderInfo.addressManagements}}
						<!-- {{ addressManagement.province }} {{ addressManagement.city }} {{ addressManagement.district }} {{ addressManagement.address }} -->
					</view>
				</view>
			</view>
			<!-- 理疗师信息 -->
			<view class="v-card padding30">
				<view class="flex-between">
					<image class="v-img border50" :src="technician.head"></image>
					<view class="color333">{{ technician.technicianName }}</view>
				</view>
				<view class="flex-between p-top20">
					<text class="colora5">下单时间</text>
					<view class="color333">{{ transformTime(orderInfo.createdAt) }}</view>
				</view>
				<view class="flex-between p-top20">
					<text class="colora5">联系电话</text>
					<view class="color333">{{ technician.mobile }}</view>
				</view>
				<view class="flex-between p-top20">
					<text class="colora5">使用{{integralName}}</text>
					<view class="color333">{{ orderInfo.integral || 0 }}</view>
				</view>
				<view class="flex-between p-top20">
					<text class="colora5">抵扣金额</text>
					<view class="color333 red">￥{{ Number(orderInfo.deductionAmount || 0).toFixed(2) }}</view>
				</view>

				<view class="flex-between p-top20">
					<text class="colora5">服务时长</text>
					<view class="color333">{{ orderInfo.serviceTime }}分钟</view>
				</view>
				<view class="flex-between p-top20">
					<text class="colora5">加钟时长</text>
					<view class="color333">{{ addHourTime(addPackage) }}分钟</view>
				</view>
				<view class="flex-between p-top20" v-if="orderInfo.fareDetails">
					<text class="colora5">车费详情</text>
					<view class="color333">{{ orderInfo.fareDetails }}</view>
				</view>
				<view class="flex-between p-top20">
					<text class="colora5">出行费用</text>
					<view class="color-red">出租车 ￥{{ orderInfo.expensesIncurred }}</view>
				</view>

				<!-- 
				old 信息
				<view class="flex-between p-top20">
					<text class="colora5">服务项目费用</text>
					<view class="color-red">￥{{ addPackage.length > 0 ? projectSum(packageList.servicePrice, addPackage) : Number(packageList.servicePrice).toFixed(2) }}</view>
				</view> -->
				
				<view class="flex-between p-top20">
					<text class="colora5">服务项目费用</text>
					<view class="color-red">￥{{ Number(packageList.servicePrice).toFixed(2) }}</view>
				</view>
				
				<view class="flex-between p-top20" v-if="addPackage.length > 0">
					<text class="colora5">加钟项目费用</text>
					<view class="color-red">￥{{  addHourSum(addPackage)  }}</view>
				</view>

				<view class="flex-between p-top20">
					<text class="colora5">支付方式</text>
					<view class="flex-align-center">
						<image class="zf-img" :src="orderInfo.payMethod == 1 ? '/static/zfye.png' : '/static/zfwx.png'"></image>
						<view class="color333">{{ orderInfo.payMethod == 1 ? '余额' : '微信' }}支付</view>
					</view>
				</view>
				<view class="flex-end p-top20">
					<view class="flex-align-center">
						<text class="color333">总计：</text>
						<view class="color-red">￥{{ addPackage.length > 0 ? sum(orderInfo.disbursements, addPackage) : Number(orderInfo.disbursements).toFixed(2) }}</view>
					</view>
				</view>
			</view>
			<view class="v-card flex-columns padding30">
				<view class="color333 p-bottom20">订单编号：{{ orderInfo.orderNumber }}</view>
				<!-- `status` '订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款）', -->
				<!-- 					v-if="orderInfo.status != 0 && orderInfo.status != 5 && orderInfo.status != 1" -->
				<uv-steps
					:dot="true"
					activeColor="#6CCC3F"
					inactiveColor="#E5E5E5"
					:current="orderInfo.status == 4 ? 4 : orderInfo.status == 2 ? 0 : orderInfo.status == 2 ? 1 : orderInfo.status == 3 ? 3 : -1"
					direction="column"
				>
					<!-- 备注：- desc="状态未开始" -->
					<uv-steps-item title="理疗师接单"></uv-steps-item>
					<uv-steps-item title="理疗师出发"></uv-steps-item>
					<uv-steps-item title="理疗师到达"></uv-steps-item>
					<uv-steps-item title="开始服务"></uv-steps-item>
					<uv-steps-item title="服务完成"></uv-steps-item>
				</uv-steps>
			</view>
		</view>
		<!-- <view class="fixed-order-btn flex-end"><view>删除</view></view> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 积分动态名称
			integralName:uni.getStorageSync('integralName')?uni.getStorageSync('integralName') : '积分',
			isShow: false, //是否展开“加时套餐列表”
			scheduleList: [
				{
					img: '/static/my/order1.png',
					text: '理疗师接单'
				},
				{
					img: '/static/my/order2.png',
					text: '理疗师出发'
				},
				{
					img: '/static/my/order3.png',
					text: '理疗师到达'
				},
				{
					img: '/static/my/order4.png',
					text: '开始服务'
				},
				{
					img: '/static/my/order5.png',
					text: '服务完成'
				}
			],
			orderId: '', //订单id
			orderInfo: {}, //订单内容对象
			packageList: {}, //套餐详情
			addressManagement: {}, //地址详情
			technician: {}, //理疗师详情
			addPackage: [] //加钟套餐
		};
	},
	onLoad(options) {
		this.orderId = options.id;
	},
	onShow() {
		this.queryDetail();
	},
	computed: {
		// 订单详情状态
		statusOn: function() {
			return function(status) {
				let statusOn =''
				// 订单状态  1.待接单 2.已接单（待服务） 3.服务中 4.已完成 5.已取消/退款  （查询订单对应状态使用，查询全部跟未支付、未评论则不使用）
				if(status==0){
					statusOn='待支付'
				}
				if(status==1){
					statusOn='待接单'
				}
				if(status==2){
					statusOn='待服务'
				}
				if(status==3){
					statusOn='服务中'
				}
				if(status==4){
					statusOn='已完成'
				}
				if(status==5){
					statusOn='已退款'
				}
				return statusOn;
			};
		},
		// 套餐总费用（服务项目费用）
		projectSum: function() {
			return function(zhuSum, projectList) {
				let projectSum = '';
				let fitSum = 0;
				for (let i = 0; i < projectList.length; i++) {
					fitSum += Number(projectList[i].servicePrice);
				}
				console.log('fitSum', fitSum);
				projectSum = Number(zhuSum) + fitSum;
				return Number(projectSum).toFixed(2);
			};
		},
		
		// 加钟总费用
		addHourSum: function() {
			return function(projectList) {
				let addHourSum = 0;
				for (let i = 0; i < projectList.length; i++) {
					addHourSum += Number(projectList[i].plusClockPrice * ((100 - projectList[i].clockDiscount) / 100)).toFixed(2);
				}
				return Number(addHourSum).toFixed(2);
			};
		},
		
		
		
		// 加钟总时长
		addHourTime: function() {
			return function(projectList) {
				let addHourTime = 0;
				for (let i = 0; i < projectList.length; i++) {
					addHourTime += Number(projectList[i].clockTime);
				}
				return Number(addHourTime);
			};
		},
		
		// 计算订单和加钟单的总金额
		sum: function() {
			return function(zhuSum, projectList) {
				let sum = '';
				let fitSum = 0;
				// 加钟价格：plusClockPrice   ，加钟折扣：clockDiscount  加钟时长/分钟：clockTime
				for (let i = 0; i < projectList.length; i++) {
					console.log("加钟总金额计算=========", Number(projectList[i].plusClockPrice * ((100 - projectList[i].clockDiscount) / 100)).toFixed(2));
					fitSum += Number(projectList[i].plusClockPrice * ((100 - projectList[i].clockDiscount) / 100))
				}
				console.log('fitSum', fitSum);
				sum = Number(zhuSum) + fitSum;
				return Number(sum).toFixed(2);
			};
		},
		// 日期转换 【2023-10-19T09:56:29】格式转【2023-10-19 09:56:29】
		transformTime: function() {
			return function(oldTime) {
				let time = '';
				time = this.$sun.dateConversion(oldTime);
				return time;
			};
		}
	},
	methods: {
		//展开收起点击事件
		toChange() {
			this.isShow = !this.isShow;
		},
		// 查询订单详情
		async queryDetail() {
			const result = await this.$http.get({
				url: this.$api.orderDetail + this.orderId
			});
			if (result.code == 200) {
				console.log('查询订单详情result', result);
				this.orderInfo = result.data;
				this.packageList = result.data.packageList;
				this.addressManagement = result.data.addressManagement;
				this.technician = result.data.technician;
				// 筛选加钟套餐，赋值到addPackage
				this.addPackage = [];
				this.orderInfo.orderList.map((i, j) => {
					this.addPackage.push(i.packageList);
				});
				console.log('addPackage加钟list=======', this.addPackage);
			} else {
				this.$sun.toast(result.message);
			}
		}
	}
};
</script>

<style lang="less">
page {
	background-color: #f7f7f7;
}
.order-details-page {
	.add-hour {
		position: absolute;
		top: 0;
		z-index: 999;
		left: 0;
		background: #19c866;
		padding: 4rpx 10rpx;
		font-size: 24rpx;
		color: #fff;
		border-radius: 10rpx;
	}
	// padding-bottom: 160rpx; 由于隐藏了底部按钮，所以需要隐藏
	.order-status {
		height: 50px;
		font-size: 32rpx;
		color: #fff;
		padding: 30rpx 20rpx 60rpx;
		background-color: #09743c;
	}
	.color-red {
		color: #fe2602;
	}
	.v-content {
		width: 100%;
		margin-top: -100rpx;
		/* position: absolute;
		top: 100rpx;
		left: 0; */
		.v-card {
			background-color: #fff;
			border-radius: 20rpx;
			margin: 0rpx 20rpx 20rpx;

			.v-img {
				width: 76rpx;
				height: 76rpx;
			}
			.type-cls {
				width: calc(100% / 5);
				view {
					font-size: 24rpx;
					margin-top: 10rpx;
					color: #747474;
				}
			}
			// "加时套餐"——展开隐藏
			.tl-mgs {
				background-color: #fff;
				padding: 20rpx;
				color: #666;
				display: flex;
				justify-content: center;
				align-content: center;
			}
			.commodity-content {
				padding: 40rpx 0 10rpx;
				image {
					width: 180rpx;
					height: 180rpx;
					border-radius: 20rpx;
					margin-right: 20rpx;
				}
				.v-price {
					margin-top: 10rpx;
					view {
						font-weight: bold;
						color: #fe2602;
						font-size: 34rpx;
					}
					text {
						color: #fe2602;
						font-size: 26rpx;
					}
				}
			}
			.zf-img {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}
	}

	.fixed-order-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;
		border-top: 2rpx solid #f7f7f7;
		height: 140rpx;
		width: 100%;
		background-color: #fff;
		view {
			margin-right: 30rpx;
			background-color: #efefef;
			color: #2a2a2a;
			padding: 20rpx 50rpx;
			border-radius: 100rpx;
		}
	}
}
</style>
